<template>
  <div class="user-edit">
    <a-card title="编辑用户">
      <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
        <a-form-item label="用户名">
          <a-input 
            v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" 
            placeholder="请输入用户名"
          />
        </a-form-item>
        
        <a-form-item label="邮箱">
          <a-input 
            v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱' }] }]" 
            placeholder="请输入邮箱"
          />
        </a-form-item>
        
        <a-form-item label="角色">
          <a-select 
            v-decorator="['role', { rules: [{ required: true, message: '请选择角色' }] }]" 
            placeholder="请选择角色"
          >
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="user">普通用户</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item :wrapper-col="{ span: 16, offset: 4 }">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left: 10px" @click="goBack">取消</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'UserEdit',
  data() {
    return {
      form: this.$form.createForm(this),
      user: null
    }
  },
  mounted() {
    // 获取路由传递的用户数据
    const userData = this.$route.params.user;
    if (userData) {
      this.user = userData;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          username: userData.username,
          email: userData.email,
          role: userData.role
        });
      });
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('保存用户信息:', values);
          this.$message.success('用户信息保存成功');
          this.goBack();
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.user-edit {
  padding: 20px;
}
</style>